<template>
  <div>
    <div class="warpper-boxs">
      <form-create 
      class="custom-select"
        v-model="params.fApi" 
        :rule="params.rule" 
        :option="params.option" 
        @btn-search-click="loadTable(true)"
        @btn-reset-click="reset"/>
    </div>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      :tabList="settleData"
      :activeTabKey="activeTabKey"
      @tabChange="callbackTab">
      <a-table 
      :columns="table.columns" 
      :pagination="table.pagination" 
      @change="handleTableChange"
      rowKey="settleBatchCode"
      :rowSelection="rowSelection"
      :scroll="{ x: calcWidth }"
      :data-source="table.loadData">
   
        <span slot="vatTotalAmount" slot-scope="text, record">
          <span>¥{{record.vatTotalAmount}}</span>
          <a style="margin-left: 6px" @click="$refs.createVatCalc.add(record)">点击计算</a>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="toDetail(record)">详情</a>
          <a-divider type="vertical" v-action:settleFileBtn />
          <a v-action:settleFileBtn @click="$refs.createLayoutFile.add(record)">文件管理</a>
          <span v-show="record.settleStatus === 1 && record.type === 1">
            <a-divider v-action:settleVerifyBtn type="vertical" />
            <a v-action:settleVerifyBtn @click="$refs.createSettleBill.add(record)">审核</a>
          </span>
          <span v-show="record.isInvoiced === 2 && record.type === 2 && record.isCancel === 2">
            <a-divider type="vertical" v-action:settleInvoicedCancelBtn />
            <a-popconfirm
                title="作废后该批次不能开票，是否作废？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="invoiceCancel(record)" >
               <a v-action:settleInvoicedCancelBtn>作废</a>
            </a-popconfirm>
          </span>
           <span v-show="record.isInvoiced === 2 && record.type === 2 && record.isCancel === 1">
            <a-divider type="vertical"/>
            <a class="color-grey">已作废</a>
          </span>
        </span>
        <span slot="name" slot-scope="text, record">
             <router-link :to="{name:'applicationTaskDetailCode',query:{id:record.taskUid,taskId:record.taskId,flag:'applicationSettleBillCode'}}">
          <a-button style="padding: 0" type="link" icon="eye">{{record.name | filterMore(6)}}</a-button>
          </router-link>
        </span>
        <span slot="settleStatus" slot-scope="text, record">
            <a-tag color="orange" v-if="text===1">待服务商审核</a-tag>
            <a-tag color="blue" v-if="text===2">结算申请中</a-tag>
            <a-tag color="green" v-if="text===3">结算成功</a-tag>
            <a-tag color="pink" v-if="text===4">部分结算成功</a-tag>
            <a-tag color="red" v-if="text===5">结算失败</a-tag>
            <a-tag color="purple" v-if="text===6">已驳回</a-tag>
            <a-tag color="cyan" v-if="text===7">银行发放中</a-tag>
        </span>
        <span slot="enterpriseName" slot-scope="text, record">
                <a-popover title="任务来源企业名称" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.enterpriseName}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.enterpriseName | filterMore(10)}}</a-button>
              </a-popover>
          </span>
          <span slot="parkName" slot-scope="text, record">
                <a-popover title="园区平台公司" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.parkName}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.parkName | filterMore(10)}}</a-button>
              </a-popover>
          </span>
          <span slot="settleBatchCode" slot-scope="text, record">
                <a-popover title="结算批次编号" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.settleBatchCode}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.settleBatchCode | filterMore(10)}}</a-button>
              </a-popover>
          </span>
          <span slot="taskId" slot-scope="text, record">
                <a-popover title="任务编号" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.taskId}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.taskId | filterMore(10)}}</a-button>
              </a-popover>
          </span>
          <span slot="settleBatchName" slot-scope="text, record">
                <a-popover title="结算批次名称" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.settleBatchName}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.settleBatchName | filterMore(7)}}</a-button>
              </a-popover>
          </span>
      </a-table>
    </a-card>
    <settle-bill-apply ref="createSettleBill" @on-ok="loadTable(true)"/>
    <settle-vat-calc ref="createVatCalc" @on-ok="loadTable(true)"/>
    <layout-file ref="createLayoutFile"/>
  </div>
</template>

<script>
import { mapGetters,mapActions } from 'vuex'
import {
    PARAMS_SETTLE,
    PARK_SETTLE_APPLY,
    COLUMNS_SETTLE_ENTERPRISE,
    COLUMNS_TSTTLE_PARK,
    COLUMNS_SETTLE_SYS,
    SETTLE_TAB_PARK,
    OPTION_BLOCK,
    OPTION_INLINE
} from './form'
import { 
    allSettlementList,
    allSettleCancel
} from '@/api/manage/sttle'
import 
  LayoutFile
from '@/views/application/modules/layout_file'
import 
  SettleBillApply
from './settle_bill_apply'
import 
  SettleVatCalc
from './settle_vat_calc'
export default {
  name: 'settleBillList',
  components: {
    SettleBillApply,
    SettleVatCalc,
    LayoutFile
  },
  data () {
    return {
      activeTabKey:'',
      calcWidth:'3600px',
      params:{
        fApi:{},
        rule:PARAMS_SETTLE,
        option:OPTION_INLINE
      },
      settleData:SETTLE_TAB_PARK,
      table:{
        columns:[],
        loadData:[],
        pagination:{
          current:1,
          pageSize: 10,
          total:0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      selectedRowKeys:[]
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    rowSelection(){
      return {
          selectedRowKeys:this.selectedRowKeys,
          fixed:true,
          onChange:(selectedRowKeys, rows) =>{
            this.selectedRowKeys = selectedRowKeys;
            if(selectedRowKeys.length==0){
                this.selectedRowKeys = [];
            }
        }
      }
    }
  },
  filters: {
    filterMore (value,num) {
      if (!value) return ''
      if (value.length > num) {
          return value.slice(0,num) + '...'
      }
      return value
    }
  },
  mounted () {
    this.generateRoutes();
    this.initColumus();
  },
  methods: {
     ...mapActions({
      generateRoutes:'generateRoutes'
    }),
    initColumus(){
      if(this.userInfo.type === 2){
        this.params.fApi.hidden(false,'parkName');
        this.params.fApi.hidden(true,'enterpriseName');
      }else if(this.userInfo.type === 3){
         this.params.fApi.hidden(true,'parkName');
        this.params.fApi.hidden(false,'enterpriseName');
      }else if(this.userInfo.type === 1){
         this.params.fApi.hidden(false,'parkName');
        this.params.fApi.hidden(false,'enterpriseName');
      }
      let sttleKey = this.userInfo.roleFiledAuthorities.sttleKey;
      if(sttleKey && sttleKey.length >= 1){
         this.table.columns = COLUMNS_SETTLE_SYS.filter(v=> !sttleKey.includes(v.dataIndex));
      }else{
         this.table.columns = COLUMNS_SETTLE_SYS;
      }
      this.loadTable(true);
    },
    async loadTable(flag){
      let params = {};
      if(JSON.stringify(this.params.fApi) !== "{}"){
        const formData = this.params.fApi.formData();
        params.settleBatchCode = formData.settleBatchCode;
        params.settleBatchName = formData.settleBatchName;
        params.taskName = formData.taskName;
        params.enterpriseName = formData.enterpriseName;
        params.parkName = formData.parkName;
        params.isInvoiced = formData.isInvoiced;
        params.payChannel = formData.payChannel;
        params.startTime = formData.day[0];
        params.endTime = formData.day[1];
      }
      if(flag){
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.settleStatus = this.activeTabKey;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const {code,data} = await allSettlementList(params);
      if(code ==='1'){
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination){
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    callbackTab(keys){
       this.activeTabKey = keys;
       this.loadTable(true);
    },
    toDetail(item){
      this.$router.push({name:'applicationSettleDetailCode',query:{settleBatchCode:item.settleBatchCode,flag:'applicationSettleBillCode'}});
    },
    async invoiceCancel(item){
      let params = {settleBatchCode:item.settleBatchCode};
      const {code} = await allSettleCancel(params);
      if(code === '1'){
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    reset(){
      this.params.fApi.resetFields();
      this.loadTable(true);
    }
  }
}
</script>
<style>

 .table-striped td {
    background-color: #fafafa !important;
}
</style>



